<template>
    <div>
        <a href="/Add">新增</a>
        名称:
        <input type="text" v-model="ts.name">
        年龄:
        <input type="text" v-model="ts.age">-<input type="text" v-model="ts.agex">
        日期:
        <input type="date" v-model="ts.d1">
        -
        <input type="date" v-model="ts.d2">
        状态:
        <select v-model="ts.state">
            <option :value="null">请选择</option>
            <option :value="true">启用</option>
            <option :value="false">禁用</option>
        </select>
        等级编号:
        <select v-model="ts.levelid">
            <option value="0">请选择</option>
            <option v-for="c in dates" :value="c.memberLevelId">{{ c.levelTitle }}</option>
        </select>
        <input type="button" value="查询" @click="c">
        <input type="button" value="重置" @click="cc">
        <table>
            <thead>
                <tr>
                    <td><input type="checkbox" @change="ssss" v-model="w"></td> 
                    <td>编号</td>
                    <td>名称</td>
                    <td>密码</td>
                    <td>性别</td>
                    <td>创建时间</td>
                    <td>日期</td>
                    <td>电话</td>
                    <td>年龄</td>
                    <td>是否删除</td>
                    <td>等级编号</td>
                    <td>图片</td>
                    <td>状</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in date">
                    <td><input type="checkbox" :value="a.id" v-model="idsit"></td>
                    <td>{{ a.id }}</td>
                    <td>{{ a.name }}</td>
                    <td>******</td>
                    <td>{{ a.sex==1?"男":"女" }}</td>
                    <td>{{ moment(a.createDate).format("YYYY-MM-DD HH:MM:SS") }}</td>
                    <td>{{ moment(a.birthday).format("YYYY-MM-DD") }}</td>
                    <td>{{ a.phoneNumber }}</td>
                    <td>{{ a.age }}</td>
                    <td>{{ a.isDelete }}</td>
                    <td>{{ a.levelTitle }}</td>
                    <td>
                        <img :src="'https://localhost:7253/'+a.img" width="50px" height="50px">
                    </td>
                    <td>{{ a.state }}</td>
                    <td>
                        <input type="button" value="编辑" @click="upd(a.id)">
                        <input type="button" value="单删除" @click="delee(a.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(2)">
        <input type="button" v-for="d in zys.row" :value="d" @click="dd(d)">
        <input type="button" value="下一页" @click="fanye(3)">
        <input type="button" value="尾页" @click="fanye(4)">
        当前第{{ts.index}}页,一共{{zys.list}}条,每页{{ts.size}}条,共{{zys.row}}页
        <input type="text" v-model="ts.index">
        <input type="button" value="跳转" @click="tiao()">
        <select v-model="ts.size" @change="ss">
            <option>2</option>
            <option>4</option>
            <option>6</option>
        </select>
        <br>
        <input type="button" value="批量逻辑删除" @click="del">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const routher = useRouter();
//删除
const delee=(val:any)=>{
    if(!confirm("确认删除吗")){
        return
    }
    axios.delete("https://localhost:7253/api/Member/DelMember",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }
        else{
            alert("删除失败")
        }
    })
}
//修改
const upd=(val:any)=>{
    routher.push({path:"/Upd",query:{id:val}})
}
//查询
const c=()=>{
    ts.value.index=1
    show()
}
const del=()=>{
    if(!confirm("确认批量删除吗")){
        return
    }
    axios.delete("https://localhost:7253/api/Member/LuoMember",{params:{id:idsit.value.toString()}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            w.value=false;
            show()
        }
        else{
            alert("删除失败")
        }
    })
}
const w=ref(false)
const idsit=ref([])
const ssss=()=>{
    if(w.value){
        date.value.forEach(e=>{
            idsit.value.push(e.id)
        })
    }
    else{
        idsit.value=[];
    }
}
//也容量
const ss=()=>{
    ts.value.index=1
    show()
}
//跳转
const tiao=()=>{
    show()
}
//数字按钮
const dd=(val:any)=>{
    ts.value.index=val;
    show()
}
onMounted(()=>{
    getAdapter()
    show()
})
//下拉框
const getAdapter=()=>{
    axios.get("https://localhost:7253/api/MemberLevel/GetMembers").then(res=>{
        dates.value=res.data;
    })
}

const dates=ref([{
    "memberLevelId": 0,
    "levelTitle": "",
    "state": false
}])
//翻页
const fanye=(val:any)=>{
    if(val==1){
        ts.value.index=1
        show()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1
            show()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1
            show()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row
        show()
    }
}
//条数
const ts=ref({
    index:1,
    size:2,
    name:'',
    age:0,
    agex:0,
    d1:'',
    d2:'',
    state:null,
    levelid:0
})
//总页数
const zys=ref({
    list:0,
    row:0
})

const show=()=>{
    axios.get("https://localhost:7253/api/Member/GetMember",{params:ts.value}).then(res=>{
        date.value=res.data.row;

        zys.value.list=res.data.list;
        zys.value.row=Math.ceil(res.data.list/ts.value.size);
    })
}
//重置
const cc=()=>{
    ts.value={
        index:1,
        size:2,
        name:'',
        age:0,
        agex:0,
        d1:'',
        d2:'',
        state:null,
        levelid:0
    }
    show()
}

const date=ref([{
  "id": 0,
  "name": "",
  "password": "",
  "sex": 0,
  "birthday": "",
  "phoneNumber": "",
  "age": 0,
  "isDelete": false,
  "createDate": "",
  "state": false,
  "memberLevelId": 0,
  "levelTitle":"",
  "img": ""
}])
</script>

<style scoped>

</style>